<template>
  <n-config-provider style="height: 100%;" :theme-overrides="themeOverrides" :locale="zhCN" :date-locale="dateZhCN">
    <div class="coat">
      <n-flex style="min-height: 900px;gap:16px">
        <div class="leftContainer">
          <div class="functionalZone">
            <Switcher :prop="southEast" @door-res="onDoorRes" />
          </div>
          <n-divider />
          <div>
            <n-h4>
              <n-text style="font-size: 18px;color: #ff5c2f;font-weight: 600;">
                注意事项：
              </n-text>
            </n-h4>
            <n-p>
              1.只有接入内网网络时可以使用该功能(公司电脑，公司wifi)。
            </n-p>
            <n-p>
              2.出现以下情况是，请联系维护人员：
              <li>点击开锁后，提示服务连接中断，请稍后再试。</li>
              <li>点击开锁后，提示开门请求发送成功，门打不开或没有声音传来，可能是硬件断线。</li>
            </n-p>
          </div>
        </div>
        <div class="rightContainer">
          <n-space align="center">
            <span style="text-align: center;">操作人：</span>
            <n-input v-model:value="createBy" type="text" placeholder="请输入操作人姓名" size="medium" clearable
              @clear="onClear"></n-input>
            <n-button color="#ff5c2f" type="primary" size="medium" @click="onSearch">
              <n-icon size="16">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
                  <g fill="none">
                    <path
                      d="M9.107 10.168a4.5 4.5 0 1 1 1.06-1.06l3.613 3.612a.75.75 0 1 1-1.06 1.06l-3.613-3.612zM9.5 6.5a3 3 0 1 0-6 0a3 3 0 0 0 6 0z"
                      fill="currentColor"></path>
                  </g>
                </svg>
              </n-icon>
              搜索
            </n-button>
          </n-space>
          <n-data-table size="small" :single-line="false" :max-height="650" :columns="columns" :data="theList" />
          <n-pagination :item-count="Number(total)" :page-sizes="[30, 50, 100, 200]" show-quick-jumper show-size-picker
            @update:page="handlePageChange" @update:page-size="handlePageSizeChange">
            <template #prefix="{ itemCount }">
              共{{ itemCount }}条
            </template>
          </n-pagination>
        </div>
      </n-flex>
    </div>
  </n-config-provider>
</template>

<script>
import { h } from 'vue';
import Switcher from './Switcher.vue';
import axios from 'axios';
import { zhCN, dateZhCN, NConfigProvider, NTag } from 'naive-ui'
export default {
  components: {
    Switcher
  },
  data() {
    return {
      themeOverrides: {
        "common": {
          "primaryColor": "#ff5c2fFF",
          "primaryColorPressed": "#FF5C2FFF",
          "primaryColorHover": "#ff8157FF",
          "primaryColorSuppl": "#FF8157FF"
        }
      },
      zhCN,
      dateZhCN,
      createBy: '',
      southEast: {
        position: '东南角门禁',
        style: {}
      },
      northWest: {
        position: '西北角门禁',
        style: {}
      },
      headers: {},

      theList: [],
      columns: [
        {
          align: 'center',
          title: "门禁名称",
          key: "position"
        },
        {
          align: 'center',
          title: "结果",
          key: "result",
          render(row) {
            if (row.result == '成功') {
              return h(
                NTag,
                {
                  type: 'success',
                },
                {
                  default: () => row.result
                }
              )
            } else {
              return h(
                NTag,
                {
                  type: 'error',
                },
                {
                  default: () => row.result
                }
              )
            }
          }
        },
        {
          align: 'center',
          title: "操作人",
          key: "createBy"
        },
        {
          align: 'center',
          title: "操作时间",
          key: "createTime",
        }
      ],
      total: '',
      pageNum: 1,//当前页
      pageSize: 15,

      onlineStyle: {
        buttonColor: '#189f57',
        backColor: '#eaf9ed',
        imgUrl: 'src/assets/images/doorOnline.png',
        lighterColor: '#2ABA52',
        theIcon: '',
        theBorder: '1px solid #ccefd6',
        theButton: ''
      },
      offlineStyle: {
        buttonColor: '#bbbbbb',
        backColor: '#f3f6f9',
        imgUrl: 'src/assets/images/doorOffline.png',
        lighterColor: '#bbbbbb',
        theIcon: 'none',
        theBorder: '1px solid #E7EEF4',
        theButton: 'none'
      }
    }
  },
  beforeMount() {
    console.log(this.$route, 'route')
    this.headers.Authorization = this.$route.query.ut
  },
  mounted() {
    this.getList();
  },
  methods: {
    onDoorRes(arg) {
      if (arg.value == '1') {
        if (arg.position == '东南角门禁') {
          this.southEast.style = this.onlineStyle
        } else if (arg.position == '西北角门禁') {
          this.northWest.style = this.onlineStyle
        }
      } else if (arg.value == '0') {
        if (arg.position == '东南角门禁') {
          this.southEast.style = this.offlineStyle
        } else if (arg.position == '西北角门禁') {
          this.northWest.style = this.offlineStyle
        }
      } else if (arg.refresh == 1) {
        this.getList()
      }
    },
    getList() {
      axios({
        method: 'get',
        url: '/esp8266/door/recordList',
        headers: this.headers,
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          createBy: this.createBy,
        }
      }).then(res => {
        if (res.data.code == 200) {
          const rows = res.data.data.rows
          for (let i = 0; i < rows.length; i++) {
            if (rows[i].result == '开门请求发送成功') {
              rows[i].result = '成功'
            } else {
              rows[i].result = '失败'
            }
          }
          this.theList = rows
          this.total = res.data.data.total
        }
      })
    },
    onSearch() {
      this.getList();
    },
    onClear() {
      this.createBy = '';
      this.getList();
    },
    handlePageChange(page) {
      this.pageNum = page;
      this.getList();
    },
    handlePageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getList();
    }
  }
}
</script>

<style scoped>
.coat {
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  background-color: #f9f9f9;
}

.leftContainer,
.rightContainer {
  min-height: 100%;
  flex: 1;
  background-color: #ffffff;
}

.functionalZone {
  display: flex;
  gap: 100px;
  padding: 20px;

  justify-content: center;
}

.leftContainer {
  padding: 40px;
}

.rightContainer {
  flex: 1;
  box-sizing: border-box;
  padding: 16px;

  display: flex;
  flex-direction: column;
  gap: 15px
}

.n-p,
li {
  margin: 0;
  line-height: 35px
}
</style>